<template>
    <div class="page" v-if="route.name">
      <WebHeader />
      <nav class="container">
        <div>
          <div>信息公开>>></div>
          <div class="container_div">
            <router-link class="rectangular-box" to="/standardQuery">标准查询</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/standardSystem">工程建设标准体系</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/policyDocument">政策性文件</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/noticeRelease">通知发布</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/international">标准国际化</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/yangtzeRiverDelta">长三角标准</router-link>
          </div>
          <div>科研管理>>></div>
          <div class="container_div">
            <router-link class="rectangular-box" to="/scientificResearch">科研成果展示</router-link>&nbsp;&nbsp;
          </div>
          <div>标准管理>>></div>
          <div class="container_div">
            <router-link class="rectangular-box" to="/solicitOpinions">征求意见</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/standardRelease">标准发布</router-link>
          </div>
          <div>实施监管>>></div>
          <div class="container_div">
            <router-link class="rectangular-box" to="/training">宣贯培训</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/consultations">标准咨询</router-link>
          </div>
          <div>团体标准>>></div>
          <div class="container_div">
            <router-link class="rectangular-box" to="/applicationInfo">团体标准信息</router-link>&nbsp;&nbsp;
            <router-link class="rectangular-box" to="/standardApplication">工程应用信息</router-link>
          </div>
        </div>
      </nav>
      <main>
        <RouterView :key="route.fullPath" />
      </main>
      <!-- <WebFooter /> -->
    </div>
    <NoPage v-else />
  </template>
  <script setup lang="ts">
  import { useRoute, RouterView } from 'vue-router'
  import NoPage from "./404/index.vue"
  import WebHeader from './header/index.vue'
  // import WebFooter from './footer/index.vue'
  const route = useRoute()
  </script>
  <style scoped>
  .page {
    min-height: 100vh;
  }

  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 60px;
    height: 100vh;           /* 视口高度 */
  }

  .container_div {
    display: flex;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .rectangular-box {
    display: block;
    width: 150px;
    height: 50px;
    background-color: hsl(0, 0%, 94%);
    border: 1px solid #ddd;
    text-align: center;
    line-height: 50px;
    text-decoration: none; /* 移除下划线 */
  }
  </style>
  
  